/**
 * Created by maxiaoqiang on 2018/7/6.
 */
import React, {Component} from "react";

import {formatChar} from "util/MyUtil";


import {TreeSelect, Table} from 'antd';


import {HttpClient} from "util/HttpClient";
import {local} from "util/MyUtil";
import "./index.less";

const typeData = {
    0: "单选题",
    1: "多选题",
    2: "判断题",
    3: "简答题"
};
class Mistakes extends Component {

    constructor(props) {
        super(props);

        this.state = {
            createAndModifyModal: false,
            value: "请选择章节",
            treeData: [],
            examChapterId: "",
            questionData: []
        }
    };

    getColumns = () => {
        return (
            [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id'
                }, {
                    title: '题目',
                    dataIndex: 'name',
                    key: 'name',
                    width: '500px'
                }, {
                    title: '选项',
                    dataIndex: 'optionList',
                    key: 'optionList',
                    width: '440px',
                    render: (text, record) => {
                        return (
                            <div>
                                {
                                    record.optionList.map((item, i)=> {
                                        return (
                                            <div key={"item"+item.id}>
                                                {formatChar(i) + ". " + item.name}
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        )
                    }
                }, {
                    title: '你的答案',
                    dataIndex: 'userAnswer',
                    key: 'userAnswer',
                    align:"center",
                    render: (text, record) => {
                        let answers = record.examAnswerHistory?record.examAnswerHistory.userAnswer.toString().split(","):'';
                        let html = "";
                        for (let i = 0; i < answers.length; i++) {
                            html += formatChar(answers[i])
                        }
                        return html;
                    }
                }, {
                    title: '参考答案',
                    dataIndex: 'answer',
                    key: 'answer',
                    align:"center",
                    render: (text, record) => {
                        let answers = record.examAnswerHistory.examAnswer.toString().split(",");
                        let html = "";
                        for (let i = 0; i < answers.length; i++) {
                            html += formatChar(answers[i])
                        }
                        return html;
                    }
                }, {
                    title: '解析',
                    dataIndex: 'analysis',
                    key: 'analysis'
                }, {
                    title: '操作',
                    key: 'action',
                    render: (text, record) => (
                        <span>
                            <a
                                key={record.examAnswerHistory.id}
                                href="javascript:;"
                                onClick={()=>{this.ignoreHandle(record.examAnswerHistory.id)}}
                            >
                                忽略
                            </a>
                        </span>
                    )
                }
            ]
        )
    };

    ignoreHandle=(id)=>{
        HttpClient.post("/v1/history/ignore/"+id)
            .then((response)=>{
                console.log(response.data)
            })
    };


    componentDidMount() {
        this.initTreeData();
        this.initQuestionData(0, 0);
    }

    initTreeData = ()=> {
        HttpClient.get("/v1/subject/subjectandchapter")
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = response.data.data;
                    console.log(data);
                    let treeData = [];
                    for (let i = 0; i < data.length; i++) {
                        let data1 = data[i];
                        let parentData = {
                            title: data1.name,
                            value: data1.id + "",
                            key: data1.id + "",
                            children: []
                        };
                        if (data1.chapterList.length > 0) {
                            for (let j = 0; j < data1.chapterList.length; j++) {
                                let data2 = data1.chapterList[j];
                                let childrenData = {
                                    title: data2.name,
                                    value: data1.id + "-" + data2.id,
                                    key: data1.id + "-" + data2.id
                                };
                                parentData.children.push(childrenData);
                            }
                        }
                        treeData.push(parentData);
                    }
                    this.setState({
                        treeData: treeData
                    })
                }
            });


    };

    initQuestionData = (examSubjectId, examChapterId)=>{
        HttpClient.get("/v1/question/mistakes?examSubjectId="+examSubjectId+"&examChapterId="+examChapterId+"&userId="+local.get("userInfo").id)
            .then((response)=>{
                console.log(response.data);
                if(response.data.code==200){
                    let data = [];
                    for (var i in response.data.data) {
                        let newData = response.data.data[i];
                        newData.key = "question_" + newData.id;
                        data.push(newData);
                    }
                    this.setState({
                        questionData: data
                    });
                }

            })
    };

    handleChange = (value)=> {
        if (value.indexOf("-") > -1) {
            this.setState({value});
            this.setState({
                examChapterId: value
            });
            this.initQuestionData(value.split("-")[0], value.split("-")[1]);
        } else {
            this.setState({value: "请选择章节"});
            this.setState({
                questionData: []
            })
        }
    };

    // initQuestionListHandle = (subjectId, chapterId)=> {
        //     HttpClient.get("/v1/question/list?examSubjectId=" + subjectId + "&examChapterId=" + chapterId)
        //         .then((response)=> {
        //             if (response.data.code == 200) {
        //                 let data = [];
        //                 for (var i in response.data.data) {
        //                     let newData = response.data.data[i];
        //                     newData.key = "question_" + newData.id;
        //                     data.push(newData);
        //                 }
        //                 this.setState({
        //                     questionData: data
        //                 })
        //             }
        //         });
        // };


    render() {
        return (
            <div className="chapter-div">
                <div className="title-div">
                    <div className="title-left">
                        <TreeSelect
                            style={{ width: 300 }}
                            value={this.state.value}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            treeData={this.state.treeData}
                            placeholder="请选择章节"
                            treeDefaultExpandAll={false}
                            onChange={this.handleChange}
                        />
                    </div>
                </div>
                <div>
                    <Table
                        bordered={true}
                        columns={this.getColumns()}
                        dataSource={this.state.questionData}
                    />
                </div>
            </div>
        )
    }
}

export default Mistakes;